<template>
  <el-drawer
    :title="$t('userInfo.Modify user information')"
    :visible.sync="drawerShow"
    size="900px"
  >
    <div class="drawer-body">
      <el-tabs>
        <el-tab-pane>
          <span slot="label">{{ $t('setting.一件代发服务') }}</span>
          <goods-size-sticker-price-drawer-item
            :user-form="userForm"
            :user-setting="userSetting"
            :setting="setting"
          ></goods-size-sticker-price-drawer-item>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">{{ $t('setting.settingLabel4') }}</span>
          <logistic-type-price-drawer-item
            :user-form="userForm"
            :user-setting="userSetting"
            :setting="setting"
          ></logistic-type-price-drawer-item>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" :class="{'font-red': isDiyPrice(userForm.packageMaterialType)}">{{ $t('setting.settingLabel5') }}</span>
          <package-meterial-drawer-item :user-form="userForm" :user-setting="userSetting" :setting="setting"></package-meterial-drawer-item>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" :class="{'font-red': isDiyPrice(userForm.transferPriceType)}">{{ $t('table.大货中转服务') }}</span>
          <transfer-price-drawer-item :user-form="userForm" :user-setting="userSetting" :setting="setting"></transfer-price-drawer-item>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" :class="{'font-red': isDiyPrice(userForm.shipmentTallyingType)}">{{ $t('setting.理货服务') }}</span>
          <shipment-tallying-drawer-item :user-form="userForm" :user-setting="userSetting" :setting="setting"></shipment-tallying-drawer-item>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" :class="{'font-red': isDiyPrice(userForm.storagePriceType)}">{{$t('仓储服务')}}</span>
          <storage-price-drawer-item
            :warehouse-list="warehouseList"
            :user-setting="userSetting"
            :user-form="userForm"
            :setting="setting"
          ></storage-price-drawer-item>
        </el-tab-pane>

        <el-tab-pane>
          <span slot="label">{{ $t('通用设置') }}</span>
          <other-drawer-item :user-form="userForm" :user-setting="userSetting"></other-drawer-item>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="drawer-footer">
      <el-button @click="submitUserForm" type="primary" size="medium" :loading="loading">{{ $t('common.confirm') }}</el-button>
      <el-button @click="closeDrawer" size="medium">{{ $t('common.cancel') }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
import GoodsSizeStickerPriceDrawerItem from "@/views/user/components/GoodsSizeStickerPriceDrawerItem.vue";
import LogisticTypePriceDrawerItem from "@/views/user/components/LogisticTypePriceDrawerItem.vue";
import PackageMeterialDrawerItem from "@/views/user/components/PackageMeterialDrawerItem.vue";
import TransferPriceDrawerItem from "@/views/user/components/TransferPriceDrawerItem.vue";
import ShipmentTallyingDrawerItem from "@/views/user/components/ShipmentTallyingDrawerItem.vue";
import OtherDrawerItem from "@/views/user/components/OtherDrawerItem.vue";
import user from "@/store/modules/user";
import {saveUserInfo} from "@/api/user";
import GoodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";
import MiddlePriceMixin from "@/views/setting/mixin/MiddlePriceMixin";
import ShipmentPriceMixin from "@/views/setting/mixin/ShipmentPriceMixin";
import TransferFeeListMixin from "@/views/setting/mixin/TransferFeeListMixin";
import LogisticTypePriceMixin from "@/views/setting/mixin/LogisticTypePriceMixin";
import StoragePriceDrawerItem from "@/views/user/components/StoragePriceDrawerItem.vue";

export default {
  name: "UserSettingDrawer",
  mixins: [GoodsSizePriceMixin, MiddlePriceMixin, ShipmentPriceMixin, TransferFeeListMixin, LogisticTypePriceMixin],
  computed: {
    user() {
      return user
    }
  },
  components: {
    StoragePriceDrawerItem,
    OtherDrawerItem,
    ShipmentTallyingDrawerItem,
    TransferPriceDrawerItem,
    PackageMeterialDrawerItem, LogisticTypePriceDrawerItem, GoodsSizeStickerPriceDrawerItem},
  props:{
    userForm: {
      type: Object,
      required: true,
    },
    userSetting: {
      type: Object,
      required: true,
    },
    warehouseList: {
      type: Array,
      required: true,
    },
    setting: {
      type: Object,
      required: true,
    },
    warehouseId: {
      type: Number,
      required: true,
    },
  },
  data(){
    return {
      drawerShow: false,
      loading: false,
    }
  },
  methods: {
    showDrawer(){
      this.drawerShow = true
    },
    isDiyPrice(val){
      return val !== 1;
    },
    closeDrawer(){
      this.drawerShow = false
    },
    submitUserForm(){
      // 校验数据
      if(
        !this.checkMiddleGeneral(this.userForm.middleGeneralPrice) ||
        !this.checkMiddleExpress(this.userForm.middleExpressPrice) ||
        !this.checkShipmentOneWeightPrice(this.userForm.shipmentOneWeightPrice) ||
        !this.checkShipmentMiddleWeightPrice(this.userForm.shipmentMiddleWeightPrice) ||
        !this.checkTransferFeeList(this.userForm.transferFeeList)
      ){
        return;
      }
      this.loading = true
      this.userForm.warehouseId = this.warehouseId
      saveUserInfo(this.userForm)
        .then( res=>{
          this.loading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.closeDrawer()
            this.$emit('submitUserForm');
          }else{
            this.$errorMessage(res.message)
          }
        })

    },
  },
}
</script>

<style scoped lang="scss">
.drawer-body{
  padding: 10px 10px;
  padding-bottom: 40px;
}
.drawer-footer{
  width: 100%;
  height: 50px;
  line-height: 40px;
  position: absolute;
  bottom: 0;
  text-align: left;
  margin-left: 20px;
}
</style>
